<template>
  <div class="Personal">
    <headerimg>
      <template v-slot:img>
        <img src="/img/cus_banner.jpg" />
      </template>
    </headerimg>
    <div class="Personal-imgtitle">
      <imgtitle>
        <img src="/img/imgHome.jpg" />
      </imgtitle>
    </div>
    <div class="Personal-bg">
      <div class="Personal-content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          :hide-required-asterisk="false"
        >
          <el-form-item label="客户名称" prop="name">
            <el-col :span="12">
              <el-input v-model="ruleForm.name"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="跟拍摄影师" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择跟拍摄影师">
              <el-option label="李白" value="李白"></el-option>
              <el-option label="杜甫" value="杜甫"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预定时间" required class="Personal-content-from">
            <el-col :span="12">
              <el-form-item prop="date1">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="ruleForm.date1"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="所在城市" required class="Personal-content-from">
            <el-col :span="6">
              <el-form-item prop="provinceValue">
                <el-select
                  v-model="ruleForm.provinceValue"
                  placeholder="请选择省"
                  @change="chooseProvince"
                >
                  <el-option
                    v-for="item in provinceData"
                    :key="item.code"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="cityValue">
                <el-select v-model="ruleForm.cityValue" placeholder="请选择市" @change="chooseCity">
                  <el-option
                    v-for="item in cityData"
                    :key="item.code"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="areaValue">
                <el-select v-model="ruleForm.areaValue" @change="chooseArea" placeholder="请选择区、县">
                  <el-option
                    v-for="item in areaData"
                    :key="item.code"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="旅行资费" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="酒店" name="type"></el-checkbox>
              <el-checkbox label="住宿" name="type"></el-checkbox>
              <el-checkbox label="交通" name="type"></el-checkbox>
              <el-checkbox label="人文自热景区" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="旅游机构" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio label="携程旅行网"></el-radio>
              <el-radio label="去哪儿"></el-radio>
              <el-radio label="途牛"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="旅游地区" prop="valueList">
            <el-transfer
              filterable
              :filter-method="filterMethod"
              filter-placeholder="请输入地区拼音"
              v-model="ruleForm.valueList"
              :data="data"
              :titles="['预选地区', '已选地区']"
              class="Personal-content-from-transfer"
            ></el-transfer>
          </el-form-item>
          <el-form-item label="个人想法" prop="desc">
            <el-col span="20">
              <el-input
              type="textarea"
              v-model="ruleForm.desc"
              :autosize="{ minRows: 9, maxRows: 14}"
            ></el-input>
            </el-col>
          </el-form-item>
              
          <el-form-item>
            <el-col :span="12" class="Personal-content-from-button" tag="div">
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import headerimg from "../conn/headerimg";
import imgtitle from "../../components/conn/imgtitle";
import axios from "axios";
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        type: [],
        resource: "",
        desc: "",
        provinceValue: "",
        cityValue: "",
        areaValue: "",
        valueList: []
      },
      rules: {
        name: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
        region: [
          { required: true, message: "请选择跟拍摄影师", trigger: "change" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择旅游机构", trigger: "change" }
        ]
      },
      provinceData: [],
      cityData: [],
      areaData: [],
      data: [
        { label: "上海", key: "上海", pinyin: "shanghai" },
        { label: "北京", key: "北京", pinyin: "beijing" },
        { label: "广州", key: "广州", pinyin: "guangzhou" },
        { label: "深圳", key: "深圳", pinyin: "shenzhen" },
        { label: "南京", key: "南京", pinyin: "nanjing" },
        { label: "西安", key: "西安", pinyin: "xian" },
        { label: "成都", key: "成都", pinyin: "chengdu" }
      ]
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$router.push({ name: "customer", params: this.ruleForm });
          return false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    chooseProvince(value) {
      this.cityValue = "";
      this.areaValue = "";
      this.cityData = [];
      this.areaData = [];
      this.provinceData.map(e => {
        //遍历数据
        if (value == e.name) {
          this.cityData = e.cityList;
          return;
        }
      });
    },
    chooseCity(value) {
      this.areaValue = "";
      this.cityData.map(e => {
        //遍历数据
        if (value == e.name) {
          this.areaData = e.areaList;
          return;
        }
      });
    },
    chooseArea() {},
    filterMethod(query, item) {
      return item.pinyin.indexOf(query) > -1;
    }
  },
  components: {
    headerimg,
    imgtitle
  },
  created() {
    axios
      .get("https://static.panpay.com/static/nuxt/json/ChinaCity.json")
      .then(res => {
        this.provinceData = res.data;
      })
      .catch(e => {
        this.$message.error("网络连接超时");
      });
  }
};
</script>

<style lang='scss'>
.Personal {
  .Personal-imgtitle {
    margin: 60px auto;
  }
  .Personal-bg {
    background-image: url("/img/bg2.jpg");
    background-size: 100vw 100%;
    width: 100vw;
    .Personal-content {
      padding-top: 100px;
      padding-bottom: 100px;
      width: 1400px;
      margin-top: 20px;
      margin: 0px auto;

      /* .el-form-item {
        input {
          background-color: transparent;
        }
      } */
    }
  }

  .el-form-item {
    margin-bottom: 35px;
  }
  .Personal-content-from {
    .el-form-item {
      margin-bottom: 0px;
    }
  }
  .Personal-content-from-button {
    margin: 60px auto;
    display: flex;
    justify-content: space-around;
  }
  .Personal-content-from-transfer {
    .el-input {
      width: 80%;
    }
    .el-transfer-panel {
      width: 300px;
    }
  }
}
</style>